{% extends 'base.html' %} {% block title %} Display Image {% endblock %} {%
block header %} {% endblock %} {% block content %}
<img
    class="mx-auto block w-full rounded rounded-lg border shadow-xl sm:w-1/2"
    src="{{ image }}"
    alt="image"
    id="image"
/>
</div>
<script>
    if (navigator.share) {
        document.write(`
      <div class="text-center">
        <button onclick="shareMeme()" class="sm:text-2xl mx-auto border px-6 m-2 bg-indigo-300 hover:bg-indigo-600 hover:text-white shadow">Share</button>
      </div>
    `);
    }
</script>

<script>
    function shareImage() {
        if (navigator.share) {
            navigator
                .share({
                    // title: 'Check out this image!',
                    // text: 'I found a funny image to share with you!',
                    url: document.getElementById("image").src,
                })
                .then(() => console.log("Successful share"))
                .catch((error) => console.log("Error sharing:", error));
        }
    }
</script>
<br />

<h2 class="text-3xl">50 Similar Images</h2>

<hr />
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
    {% for image in images %}
    <a href="/image/{{image.id}}">
        <div
            class="bg-card text-card-foreground rounded-lg border shadow-sm"
            data-v0-t="card"
        >
        <img  class="h-48 w-full object-cover"
        style="aspect-ratio: 400 / 300; object-fit: cover" src="{{ image.url }}" alt="image" />
        </div>
    </a>
    {% endfor %}
</div>
{% endblock %}
